<template>
	<div class="boxmain">
		<h3>
			学校信息
			<p>
				<el-button type="primary" @click="addSchool">创建新学校</el-button>
				<el-button type="primary" style="background-color: red;border:solid 1px red" @click="batchDelete">批量删除</el-button>
			</p>
		</h3> 
		<div class="chooseschool">
			选择查看学校
			<el-select v-model="searchschool" placeholder="" @change="selectschool" v-if="schoolselect">
				<el-option
				  key="全部"
				  label="全部"
				  value="全部">
				</el-option>
			  <el-option
			    v-for="item in schoolselect"
			    :key="item.schoolName"
			    :label="item.schoolName"
			    :value="item.schoolName">
			  </el-option>
			</el-select>
		</div>
		<!-- <div  class="table-container" ref="scrollContainer" style="height: 420px; overflow-y: auto;"> -->
			<el-table
				:data="schoolData"
				border
				 :row-class-name="tableRowClassName"
				 ref="multipleTable"
				 :height="tableheight"
				  @selection-change="handleSelectionChange"
				style="width: 100%">
				<el-table-column
					  type="selection"
					  width="55">
				</el-table-column>
				<el-table-column
				  prop="schoolName"
				  label="考试学校"
				  width="180">
				</el-table-column>
				<el-table-column
				  label="上报人数"
				  width="180">
				  <template slot-scope="scope">
					  {{scope.row.studentCount?scope.row.studentCount:0}}
				  </template>
				</el-table-column>
				<el-table-column
				  prop="examStuCount"
				  label="实际参考人数">
				</el-table-column>
				<el-table-column
				  label="班级数"
				  prop="classNumber">
				</el-table-column>
				<el-table-column
				  prop="address"
				  label="操作">
				  <template slot-scope="scope">
				  <el-button @click="fixedschool(scope.row)" type="text" size="small">修改</el-button>
				  <el-button @click="deleteschool(scope.row.gradeId)" type="text" size="small">删除</el-button>
				</template>
				</el-table-column>
			  </el-table>
		  <!-- </div> -->
		<div style="margin-top:20px;" class="boxpagelist">
			<span class="colorGray">已选中{{multipleSelection.length}}条，</span>
			<span class="colorGray">共{{schoolData.length}}条数据</span>
			<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="pageIndex"
			      :page-sizes="[20, 50, 100]"
			      :page-size="pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
				  background
			      :total="listTotal?listTotal:0">
			    </el-pagination>
		</div>
		<!-- 新建、编辑学校信息 -->
		<div class="addExamMain" v-if="addschoolIshow">
			<div class="addExamContent">
				<h3>新建/编辑 学校信息</h3>
				<ul>
					<li>
						<span>学校名称</span>
						<el-input v-model="schoolinfo.schoolName" placeholder="请输入内容" @blur="sqjd"></el-input>
					</li>
					<li>
						<span>所在省</span>
						<el-input v-model="schoolinfo.province" clearable placeholder="请输入内容" @blur="sqjd1"></el-input>
					</li>
					<li>
						<span>所在市</span>
						<el-input v-model="schoolinfo.city" clearable placeholder="请输入内容" @blur="sqjd2"></el-input>
					</li>
					<li>
						<span>文科A线人数</span>
						<el-input v-model="schoolinfo.wkAnumber" @input="schoolinfo.wkAnumber =$event.replace(/[^0-9]/g, '')" clearable placeholder="0" @blur="sqjd3"></el-input>
					</li> 
					<li>
						<span>文科B线人数</span>
						<el-input v-model="schoolinfo.wkBnumber" @input="schoolinfo.wkBnumber = $event.replace(/[^0-9]/g, '')" clearable placeholder="0" @blur="sqjd4"></el-input>
					</li>
					<li>
						<span>理科A线人数</span>
						<el-input v-model="schoolinfo.lkAnumber" @input="schoolinfo.lkAnumber = $event.replace(/[^0-9]/g, '')" clearable placeholder="0" @blur="sqjd5"></el-input>
					</li>
					<li>
						<span>理科B线人数</span>
						<el-input v-model="schoolinfo.lkBnumber" @input="schoolinfo.lkBnumber = $event.replace(/[^0-9]/g, '')" clearable placeholder="0" @blur="sqjd6"></el-input>
					</li>
					<li>
						<span>班级名称</span>
						<el-input v-model="schoolinfo.classNames" clearable placeholder="输入多个班级名称以#分隔" type="textarea"></el-input>
					</li>
					<li>
						<span>生成留痕开关</span>
						<el-switch
						  v-model="youhen">
						</el-switch>
					</li>
					<li>
						<span>学生查询</span>
						<el-switch
						  v-model="student">
						</el-switch>
					</li>
					<li>
						<span>教师查询</span>
						<el-switch
						  v-model="teachter">
						</el-switch>
					</li> 
					<li style="color:red;" v-if="attentionIshow">
						<span></span>
						<i class="el-icon-warning-outline"></i>{{attention}}
					</li>
				</ul>
				<div class="groupbutton">
					<el-button type="primary" @click="bcpromit">保存</el-button>
					<el-button type="primary" @click="backgo">返回</el-button> 
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {schoolList,schoolEdit,schoolDelete} from '../../../api/scoreapi'
	export default{
		data(){
			return{
				searchschool:'全部',
				schoolData: [],
				tableheight:'',
				addschoolIshow:false,
				schoolinfo:{
					schoolName:'',
					province:'',
					city:'',
					wkAnumber:'',
					wkBnumber:'',
					lkAnumber:'',
					lkBnumber:'',
					selectMarkPaper:'',
					stuSelectType:'',
					teacherSelectType:'',
					n4Id:'',
					n5Id:'',
					gradeName:'',
					classNames:'',
					g3Id:''
				},
				multipleSelection:[],
				titlecontent:{},
				youhen:false,
				student:false,
				teachter:false,
				options:[],
				ids:[],
				schoolselect:'',
				attentionIshow:false,
				pageSize:2000,
				pageIndex:1,
			}
		},
		mounted() {
			// 在组件挂载后获取屏幕高度
			let newtitle = decodeURIComponent(this.$route.query.con)
			this.titlecontent = JSON.parse(newtitle)
			this.getScreenHeight();
			//在窗口大小变化时更新屏幕高度，可以监听window的resize事件
			// window.addEventListener('resize', this.getScreenHeight);
			this.schoolclick(JSON.parse(this.$route.query.con).n5Id)
			localStorage.setItem('menuState', 2);
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
		    getScreenHeight() {
		      // 获取屏幕高度并更新data中的screenHeight
		      this.tableheight = parseInt(window.innerHeight-366);
		    },
			//筛选学校
			selectschool(val){
				this.schoolclick(this.titlecontent.n5Id)
			},
			//创建学校
			addSchool(){
				this.addschoolIshow = true
			},
			//修改学校
			fixedschool(con){
				this.schoolinfo.schoolName = con.schoolName
				this.schoolinfo.province=con.province
				this.schoolinfo.city=con.city
				this.schoolinfo.wkAnumber=con.wkAnumber
				this.schoolinfo.wkBnumber=con.wkBnumber
				this.schoolinfo.lkAnumber=con.lkAnumber
				this.schoolinfo.lkBnumber=con.lkBnumber
				this.schoolinfo.classNames=con.classList!=null?con.classList.map(item => item.name).join('#'):undefined
				this.youhen=con.selectMarkPaper==1?true:false
				this.student = con.stuSelectType==1?true:false
				this.teachter = con.teacherSelectType==1?true:false
				this.schoolinfo.n4Id=this.titlecontent.n4Id
				this.schoolinfo.n5Id=this.titlecontent.n5Id
				this.schoolinfo.gradeName=this.titlecontent.grade
				this.schoolinfo.g3Id = con.schoolId
				this.addschoolIshow = true
			},
			//删除学校
			deleteschool(gradeid){
				let params={
					ids:[gradeid]
				}
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					schoolDelete(params).then(res=>{
						if(res.code==0){
							this.schoolclick(this.titlecontent.n5Id)
							this.$message({
								type: 'success',
								message: res.msg
							});
						}else{
							this.$message({
								type: 'error',
								message: res.msg
							});
						}
					})
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
				
			},
			//table各色换行
			tableRowClassName({row, rowIndex}) {
				return rowIndex % 2 === 0 ? 'warning-row' : 'success-row'
			},
			// 批量删除
			batchDelete(){
				// console.info(this.multipleSelection)
				let newarray = this.multipleSelection.map(item=>item.gradeId)
				let params={
					ids:newarray
				}
				schoolDelete(params).then(res=>{
					this.$message({
					  message: res.msg,
					  type: 'error'
					});
					this.schoolclick(this.titlecontent.n5Id)
				})
			},
			// 获取学校列表
			schoolclick(id){
				let params={n5Id:id,pageSize:this.pageSize,
				pageIndex:this.pageIndex}
				schoolList(params).then(res=>{
					if(res.code==0){
						console.info(res.data)
						this.schoolData = res.data.groupPageList
						this.schoolselect = res.data.groupPageList
						if(this.searchschool!=''&&this.searchschool!='全部'){
							this.schoolData = res.data.groupPageList.filter((item)=>item.schoolName==this.searchschool)
						}
						this.listTotal = res.data.total
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			// 处理每页条数变化
			handleSizeChange(val){
				this.pageSize = val
				 this.schoolclick(this.titlecontent.n5Id)
			},
			// 处理当前页码变化
			handleCurrentChange(val){
				this.pageIndex = val
				 this.schoolclick(this.titlecontent.n5Id)
			},
			// calculateIsLastPage() {
			//   const lastPage = Math.ceil(this.listTotal / this.pageSize);
			//   const isLastPage = this.pageIndex === lastPage;
			//   this.schoolclick(this.titlecontent.n5Id)
			//   if(isLastPage){
			// 	  this.currentPagetotal = this.listTotal
			//   }else{
			// 	 this.currentPagetotal = this.pageSize*this.pageIndex
			//   }
			//   // 根据isLastPage的值做相应处理
			// },
			sqjd(){
				this.attentionIshow = false;
				this.attention = ''
			},
			sqjd1(){
				this.attentionIshow = false;
				this.attention = ''
			},
			sqjd2(){
				this.attentionIshow = false;
				this.attention = ''
			},
			sqjd3(){
				this.attentionIshow = false;
				this.attention = ''
			},
			sqjd4(){
				this.attentionIshow = false;
				this.attention = ''
			},
			sqjd5(){
				this.attentionIshow = false;
				this.attention = ''
			},
			sqjd6(){
				this.attentionIshow = false;
				this.attention = ''
			},
			//保存创建、编辑学校信息
			bcpromit(){
				this.attentionIshow = false;
				this.attention = '';
				if(this.schoolinfo.schoolName==''){
					this.attentionIshow = true;
					this.attention = '请输入学校名称';
					return false;
				}
				if(this.schoolinfo.province==''){
					this.attentionIshow = true;
					this.attention = '请填写所在省';
					return false;
				}
				if(this.schoolinfo.city==''){
					this.attentionIshow = true;
					this.attention = '请填写所在市';
					return false;
				}
				if(this.schoolinfo.wkAnumber==''&&this.schoolinfo.wkAnumber<0){
					this.attentionIshow = true;
					this.attention = '文科A线人数';
					return false;
				}
				if(this.schoolinfo.wkBnumber==''&&this.schoolinfo.wkBnumber<0){
					this.attentionIshow = true;
					this.attention = '文科B线人数';
					return false;
				}
				if(this.schoolinfo.lkAnumber==''&&this.schoolinfo.lkAnumber<0){
					this.attentionIshow = true;
					this.attention = '理科A线人数';
					return false;
				}
				if(this.schoolinfo.lkBnumber==''&&this.schoolinfo.lkBnumber<0){
					this.attentionIshow = true;
					this.attention = '理科B线人数';
					return false;
				}
				this.schoolinfo.n4Id=this.titlecontent.n4Id
				this.schoolinfo.n5Id=this.titlecontent.n5Id
				this.schoolinfo.gradeName=this.titlecontent.grade
				this.schoolinfo.selectMarkPaper = this.youhen?1:0
				this.schoolinfo.stuSelectType = this.student?1:0
				this.schoolinfo.teacherSelectType = this.teachter?1:0
				this.schoolinfo.g3Id=this.schoolinfo.g3Id?this.schoolinfo.g3Id:undefined
				schoolEdit(this.schoolinfo).then(res=>{
					this.addschoolIshow = false
					this.$message({
					  message: '添加/编辑考试成功',
					  type: 'success'
					});
					this.schoolinfo={
						schoolName:'',
						city:'',
						wkAnumber:'',
						wkBnumber:'',
						lkAnumber:'',
						lkBnumber:'',
						selectMarkPaper:'',
						stuSelectType:'',
						teacherSelectType:'',
						n4Id:'',
						n5Id:'',
						gradeName:'',
						classNames:''
					}
					this.youhen = false
					this.student=false
					this.teachter=false
					this.schoolclick(this.titlecontent.n5Id)
				})
			},
			backgo(){
				this.addschoolIshow=false
				this.schoolinfo={
					schoolName:'',
					city:'',
					wkAnumber:'',
					wkBnumber:'',
					lkAnumber:'',
					lkBnumber:'',
					selectMarkPaper:'',
					stuSelectType:'',
					teacherSelectType:'',
					n4Id:'',
					n5Id:'',
					gradeName:'',
					classNames:''
				}
				this.youhen = false
				this.student=false
				this.teachter=false
			}
		},
		beforeDestroy() {
			// 在组件销毁前移除事件监听器，避免内存泄漏
			// window.removeEventListener('resize', this.getScreenHeight);
		},
		// watch:{
		// 	searchschool(newVal,oldVal){
		// 		if(newVal!=oldVal){
		// 			this.schoolclick(this.titlecontent.n5Id)
		// 		}
		// 	}
		// }
	}
</script>

<style scoped>
	.boxmain h3{
		padding:0 0 20px;
		font-size:18px;
		display: flex;
		justify-content: space-between;
	}
	.boxmain h3 >>> .el-button{
		background:#165DFF
	}
	.boxmain{
		padding:30px;
	}
	.chooseschool{
		margin-bottom:15px;
		display: flex;
		align-items: center;
	}
	.chooseschool >>> .el-select{
		margin-left:10px;
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:1;
	}
	.addExamContent{
		width: 741px;
		min-height: 750px;
		position: fixed;
		background:#fff;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:15px;
	}
	.addExamContent ul li span{
		font-size:16px;
		display: flex;
		align-items: center;
		width:140px;
		justify-content: left;
	}
	.addExamContent ul li span i{
		font-style:normal;
		color:red;
		padding-left:5px;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>> .el-input,.addExamContent ul li >>> .el-textarea{
		width:350px;
	}
	.addExamContent ul li >>>.el-textarea__inner {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:30px;
	}
	.groupbutton >>> .el-button{
		background:#165DFF;
		width:100px;
		margin-right:20px;
	}
	.boxmain >>> .el-table .warning-row {
	    background: rgb(243, 247, 255);
	}
	.boxmain >>> .el-table .success-row {
	    background:#fff;
	}
	.boxmain >>> .el-table .el-table__header-wrapper thead th {
	  background-color:rgb(220, 231, 255); /* 设置你想要的背景颜色 */
	  color: #000000; /* 设置你想要的文字颜色 */
	}
	.boxpagelist{
			  display: flex;
			  align-items: center;
	}
	.boxpagelist >>> .el-pagination__total{
			  display: none !important;
	}
	.colorGray{
			  font-size:12px;
			  color:#999;
	}
	.boxpagelist >>> .el-pagination__jump{
			  color:#999;
			  font-size:12px;
	}
	.boxpagelist >>> .el-pagination__sizes .boxpagelist >>> .el-input .boxpagelist >>> .el-input__inner{
			  font-size:12px;
	}
	.boxpagelist >>> .el-pagination.is-background  .boxpagelist >>> .el-pager li:not(.disabled).active{
			 background-color:#1664FF !important
	}
</style>